<template>
  <div class="userformation">
    <div class="cart" >   
                <i class="el-icon-bangzhu"></i>
                <span>//</span>
            </div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="公司筛选">
            <el-select v-model="formInline.area" placeholder="筛选公司">
            <el-option 
            v-for="(item,index) in sel"
            :key="item+index"
            :label="item" 
            :value="item"
            ></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="部门筛选">
            <el-select v-model="formInline.department" placeholder="筛选部门">
            <el-option 
            v-for="(item,index) in sel2"
            :key="item+index"
            :label="item" 
            :value="item"
            ></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="职级筛选">
            <el-select v-model="formInline.job_level" placeholder="筛选职级">
            <el-option 
            v-for="(item,index) in sel3"
            :key="item+index"
            :label="item" 
            :value="item"
            ></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="性别筛选">
            <el-select v-model="formInline.gender" placeholder="筛选性别">
            <el-option 
            v-for="(item,index) in sel4"
            :key="item+index"
            :label="item" 
            :value="item"
            ></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" size="small">查询</el-button>
        </el-form-item>
    </el-form>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column fixed prop="id" label="序号" width="50"></el-table-column>
      <el-table-column prop="number" label="档案编号" width="50"></el-table-column>
      <el-table-column prop="name" label="姓名" width="120"></el-table-column>
      <el-table-column prop="company" label="所属公司" width="120"></el-table-column>
      <el-table-column prop="branch" label="部门" width="70"></el-table-column>
      <el-table-column prop="jobname" label="职务名称" width="70"></el-table-column>
      <el-table-column prop="rank" label="职级" width="120"></el-table-column>
      <el-table-column prop="sex" label="性别" width="50"></el-table-column>
      <el-table-column prop="age" label="年龄" width="50"></el-table-column>
      <el-table-column prop="birth" label="出生年月" width="120"></el-table-column>
    </el-table>
    <el-pagination background layout="prev, pager, next" :total="100"></el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: 1,
          number: 1,
          name: "张三",
          company: "荣昌项目",
          branch: "1组",
          jobname: "组长",
          rank: "一线员工",
          sex: "女",
          age: 48,
          birth: "1972-10-2"
        },
        {
          id: 2,
          number: 2,
          name: "李四",
          company: "荣昌项目",
          branch: "1组",
          jobname: "组长",
          rank: "一线员工",
          sex: "女",
          age: 48,
          birth: "1972-10-2"
        }
      ],
      formInline: {
          area: '',
          department: '',
          job_level:''
        },
    sel:['荣昌公司','重庆公司','四川公司'],
    sel2:['1组','2组','3组'],
    sel3:['部门经理','高层','管理人员','员工'],
    sel4:['男','女'],
    };
  },
  methods: {
    
  },
};
</script>

<style lang="less">
.userformation {
  .cart{
            width: 20%;
            margin-bottom: 30px;
            i{
                font-size: 20px;
                margin-right: 8px;
                color: gray;
            }
            span{
                font-size: 15px;
                color: gray;
                font-weight: bold;
            }
        }
  .el-input--mini .el-input__inner {
    width: 40%;
    margin-bottom: 22px;
  }
  .el-input--mini{
    display: inline;
    margin-right: 80px;
  }
  .el-pagination{
    display: flex;
    justify-content: center;
  }
  .el-input--suffix .el-input__inner{
      width: 130px;
  }
}
</style>